import React, { Component } from "react";
import {
  StyleSheet, View, Text, FlatList, Image, SafeAreaView, Animated, Alert,
} from "react-native";
import { connect } from "react-redux"; // 引入connect函数
import {
  Color, FontSize, ScreenWidth, scale,
} from "../common";
import EnumConstants from "../common/EnumConstants";
import NavigatorUtil from "../utils/NavigatorUtil";
import Button from "../widget/common/NCButton";
import AddressItem from "../widget/listitem/AddressItem";
import BasePage from "../widget/common/BasePage";
import * as addressListAction from "../actions/addressListAction"; // 导入action方法

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

let type;
let callback;

class AddressList extends Component {
  constructor(props) {
    super(props);
    type = NavigatorUtil.getPageParam(props, "type");
    callback = NavigatorUtil.getPageParam(props, "callback");
  }

  componentWillMount() {
    const { props } = this;
    props.dispatch(addressListAction.getAddressList());
  }

  componentWillUnmount() {
    const { props } = this;
    props.dispatch(addressListAction.unmount());
  }

  renderFooter = () => {
    return (
      <Button
        onPress={() => NavigatorUtil.goNewAddress()}
        buttonStyle={styles.btnContainer}
        textStyle={styles.btnText}
        title="添加地址"
      />
    );
  };

  deleteItem(addressId) {
    const { props } = this;
    Alert.alert(
      "删除地址",
      "确认删除该地址吗？",
      [
        { text: "取消", onPress: () => {}, style: "cancel" },
        {
          text: "确认",
          onPress: () => props.dispatch(addressListAction.deleteAddress(addressId)),
        },
      ],
      { cancelable: false },
    );
  }

  setDefaultAddress(addressId) {
    const { props } = this;
    Alert.alert(
      "更换地址",
      "是否更换默认地址?",
      [
        { text: "取消", onPress: () => {}, style: "cancel" },
        {
          text: "确认",
          onPress: () => props.dispatch(addressListAction.setDefaultAddress(addressId, callback)),
        },
      ],
      { cancelable: false },
    );
  }

  renderItem = ({ item, index }) => {
    const { props } = this;
    const {
      real_name,
      cell_phone,
      province_name,
      city_name,
      county_name,
      detail_address,
      default_flag,
      delivery_address_id,
    } = item;
    return (
      <AddressItem
        onSetDefaultPress={() => this.setDefaultAddress(delivery_address_id)}
        onDeletePress={() => this.deleteItem(delivery_address_id)}
        onEditPress={() => NavigatorUtil.goEditAddress(item)}
        name={real_name}
        mobile={cell_phone}
        address={`${province_name}-${city_name}-${county_name}${detail_address}`}
        isDefault={default_flag === 1}
      />
    );
  };

  render() {
    const { addressListReducer } = this.props;
    const { addressList, loading, initing } = addressListReducer;
    return (
      <BasePage showIniting={initing} showLoading={loading}>
        <AnimatedFlatList
          bounces={false}
          ListFooterComponent={this.renderFooter}
          renderItem={this.renderItem}
          data={addressList}
          keyExtractor={(_, i) => String(i)}
        />
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.background_native,
  },
  btnContainer: {
    marginTop: scale * 32,
    height: 44 * scale,
    width: ScreenWidth - scale * 64,
    marginLeft: scale * 32,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.tab_yellow,
    borderWidth: 0,
    marginBottom: 30 * scale,
  },
  btnText: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
  },
});

const reducers = state => {
  return {
    addressListReducer: state.addressListReducer,
  };
};
export default connect(reducers)(AddressList);
